import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { getUserInfoAPI } from '@/api/index' // 9.8同步

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 8.1 ① 用来存储登录成功后，得到的 token：
    token: '',
    userInfo: {} // 9.8同步：保存用户信息，且定义为对象(与接口返回一致类型)
  },
  // 9.end
  getters: {
    // 计算属性获取用户部分信息：(layout下映射 计算属性)
    username: state => state.userInfo.username, // 用户名称
    nickname: state => state.userInfo.nickname, // 用户昵称
    user_pic: state => state.userInfo.user_pic // 用户头像
  },
  mutations: {
    // 8.1 ② 更新 token 到 mutation函数：
    updateToken (state, newToken) {
      state.token = newToken
    },
    // 9.8同步：
    updateUserInfo (state, newUserInfo) {
      state.userInfo = newUserInfo
    }
  },
  actions: {
    // 9.8同步：直接将 请求接口方法 放入store下的action
    async getUserInfoActions (context) {
      const res = await getUserInfoAPI()
      // console.log(res)
      context.commit('updateUserInfo', res.data)
    }
  },
  modules: {
  },
  // 8.3 持久化存储token：
  plugins: [createPersistedState()]
})
